<!-- 通用的列表页 -->
<template>
  <div class="slide_list">
    <!-- 标题 -->
    <h2 class="title"> {{title}}： </h2>
    <!-- 排序按钮 -->
   <el-row class="sort_select">
     <el-col :span="6">
       <el-form :model="pagination" @submit.prevent>
         <el-form-item label="模糊查询">
           <el-input 
            placeholder="查询的名称" 
            v-model="pagination.name">
          </el-input>
         </el-form-item>
       </el-form>
     </el-col>
     <el-col :span="2">
         <el-button type="primary"  @click="getList">查询</el-button>
     </el-col>
     <el-col :span="3" :offset="13">
       <el-button icon="el-icon-caret-bottom" plain type="primary" @click="buttonSort(-1)"></el-button>
       <el-button icon="el-icon-caret-top" plain type="primary" @click="buttonSort(1)"></el-button>
     </el-col>
   </el-row>
    <!-- 表格 -->
    <el-table :data="slideData" stripe border>
      <el-table-column 
        v-for="(item, index) in slide"
        :key="index"
        :prop="item.name"
        :label="item.label"
        :width="index == 1 ? 400 : 'auto'">
      </el-table-column>
      <el-table-column label="操作">
        <template v-slot:default="scope">
          <p class="el-icon-edit p" @click="onCreate(scope.row._id)"> 编辑</p>
          <p class="el-icon-delete p" @click="remove(scope.row._id)"> 删除</p>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.page"
      :page-sizes="[5, 10, 20]"
      :page-size="pagination.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total">
    </el-pagination>
  </div>
</template>

<script lang='ts'>
import { defineComponent, reactive, onMounted, toRefs } from 'vue';
import { useRouter }  from 'vue-router';
import axios from '../http/axios';
import { ElMessage } from 'element-plus';
import { ElMessageBox } from 'element-plus';

export default defineComponent({
  name: 'CurrencyList',
  props: [
    'title',
    'slide',
    'path'
  ],
  setup (props) {
    const data = reactive({
      router: useRouter(),

      // 表格的数据
      slideData: [],

      // 编辑按钮
      onCreate: (id: string): any => {
        data.router.push(`/${props.path}/edit/${id}`);
      },

      // 分页
      pagination: {
        page: 1,   // 当前页，默认第1页
        pagesize: 5, // 一页显示多少数据, 默认2
        total: 0,     // 总数据
        sort: 1,
        name: ''
      },

      // 模糊查询
      select: {}
    })

    // 获取列表数据
    async function getList(): Promise<any> {
      try {
        // 传递参数 当前页/一页显示多少数据
        // const { data: list }= await axios.get(`${props.path}/page/${data.pagination.page}+${data.pagination.pagesize}`);
        // 获取请求的参数（克隆一份，删除其中的 total
        const querye = JSON.parse(JSON.stringify(data.pagination));
        delete querye.total;

        const { data: list }= await axios.get(`${props.path}/page/`, {
          params: querye
        });
        // 总数据
        data.pagination.total = list.total;
        data.slideData = list.content;

      } catch (Err) {
        ElMessage.error('请求数据失败');
      }
    }

    // 删除轮播图
    async function remove (id: string): Promise<any> {
      try {
          await ElMessageBox.confirm('是否删除该轮播图', '删除操作', {
            confirmButtonText: '确定',
            cancelButtonText: '取消'
          });
        } catch(Err) {
          return ElMessage.info('已取消');
        }

        const { data } = await axios.delete(`/${props.path}/${id}`);
        ElMessage.success(data.success);
        // 再次获取数据
        getList();
    }

    // 改变每页显示多少条的框触发，触发后，修改 pagesize 的值
    function handleSizeChange (val: number) {
      // 修改 每页的条数
      data.pagination.pagesize = val;
      // 重新获取数据
      getList();
    }

    // 点击前往 n页 时触发
    function handleCurrentChange (val: number) {
      // 修改 当前页
      data.pagination.page = val;
      // 重新获取数据
      getList();
    }

    // 点击排序触发
    function buttonSort (isSort: number) {
      data.pagination.sort = isSort;
      getList();
    }

    // 点击模糊查询按钮
    // function select () {
    //   // 修改提交参数中的 name 属性
    // }

    onMounted(() => {
      getList();
    })

    const refData = toRefs(data);

    return { 
      ...refData,
      remove,
      handleSizeChange,
      handleCurrentChange,
      buttonSort,
      getList
    }
  }
})
</script>

<style lang="scss" scoped>
.slide_list {
  // 查询
  .sort_select {
    clear: left;
  }
  .p {
    color:rgb(0, 110, 255);
    margin-right: 20px;
    cursor: pointer;
  }
  // 分页
  .el-pagination {
    margin-top: 50px;
    font-size: 20px;
  }
}
</style>